<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>服务事项</title>      
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="format-detection" content="telephone=no">
        
        <link rel="stylesheet" href="../../plugins/layui/css/layui.css" media="all" />
        <link rel="stylesheet" href="../../css/global.css" media="all">
        <link rel="stylesheet" href="../../plugins/font-awesome/css/font-awesome.min.css">
        <link rel="stylesheet" href="../../css/table.css" /> 
        
    </head>
    <body>
        <div style="margin: 15px;">
            <div class="layui-tab layui-tab-card">
                <ul class="layui-tab-title">
                    <li class="layui-this">行政审批</li>
                    <li>查询服务</li>
                    <li>第三方服务</li>
                    <li>企业服务</li>                   
                </ul>
                <div class="layui-tab-content">
                    <div class="admin-main">
                        <blockquote class="layui-elem-quote">
                            <form class="layui-form" action="">				
                                <div class="layui-form-item">
                                    <label class="layui-form-label">服务主题</label>
                                    <div class="layui-input-inline">
                                        <select name="zhuti">
                                            <option value="">—— 请选择 ——</option>
                                            <option value="主题名称1">主题名称1</option>
                                            <option value="主题名称2">主题名称2</option>
                                            <option value="主题名称3">主题名称3</option>
                                            <option value="主题名称4">主题名称4</option>
                                        </select>
                                    </div>
                                    <label class="layui-form-label">事项状态</label>
                                    <div class="layui-input-inline">
                                        <select name="status">
                                            <option value="">—— 请选择 ——</option>
                                            <option value="已上线">已上线</option>
                                            <option value="未上线">未上线</option>
                                        </select>
                                    </div>
                                    <label class="layui-form-label">事项名称</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
                                    </div>                                    
                                    <button class="layui-btn" lay-submit="" lay-filter="sear">搜索</button>
                                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                    <a href="addItems.html" class="layui-btn"><i class="layui-icon"></i>添加</button>
                                    <a href="items.html" class="layui-btn layui-btn-danger">事项库</a>
                                </div>
                            </form>
                        </blockquote>                                                 
                    </div>

                    <div class="layui-tab-item layui-show">
                        <div class="layui-field-box">
                            <table class="site-table table-hover">
                                <thead>
                                    <tr>
                                        <th><input type="checkbox" id="selected-all1"></th>
                                        <th>产品编号</th>
                                        <th>事项编号</th>
                                        <th>事项名称</th>
                                        <th>类型</th>
                                        <th>服务主题</th>
                                        <th>状态</th>                                   
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody id="items-list1"></tbody>
                            </table>                        
                            <div class="admin-table-page"><div id="page1" class="page"></div></div>
                        </div>
                    </div>

                    <div class="layui-tab-item">
                        <div class="layui-field-box">
                            <table class="site-table table-hover">
                                <thead>
                                    <tr>
                                        <th><input type="checkbox" id="selected-all2"></th>
                                        <th>产品编号</th>
                                        <th>事项编号</th>
                                        <th>事项名称</th>
                                        <th>类型</th>
                                        <th>服务主题</th>
                                        <th>状态</th>                                   
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody id="items-list2"></tbody>
                            </table>                        
                            <div class="admin-table-page"><div id="page2" class="page"></div></div>
                        </div>
                    </div>
                    <div class="layui-tab-item">
                        <div class="layui-field-box">
                            <table class="site-table table-hover">
                                <thead>
                                    <tr>
                                        <th><input type="checkbox" id="selected-all3"></th>
                                        <th>产品编号</th>
                                        <th>事项编号</th>
                                        <th>事项名称</th>
                                        <th>类型</th>
                                        <th>服务主题</th>
                                        <th>状态</th>                                   
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody id="items-list3"></tbody>
                            </table>                        
                            <div class="admin-table-page"><div id="page3" class="page"></div></div>
                        </div>
                    </div>
                    <div class="layui-tab-item">
                        <div class="layui-field-box">
                            <table class="site-table table-hover">
                                <thead>
                                    <tr>
                                        <th><input type="checkbox" id="selected-all4"></th>
                                        <th>产品编号</th>
                                        <th>事项编号</th>
                                        <th>事项名称</th>
                                        <th>类型</th>
                                        <th>服务主题</th>
                                        <th>状态</th>                                   
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody id="items-list4"></tbody>
                            </table>                        
                            <div class="admin-table-page"><div id="page4" class="page"></div></div>
                        </div>
                    </div> 
                      
                </div>
            </div>
        </div>
        <script type="text/javascript" src="../../plugins/layui/layui.js"></script>
        <script>
            layui.config({
                base: '../../plugins/layui/modules/'
            });
            //搜索表单
            layui.use(['form', 'layedit', 'laydate', 'element', 'icheck', 'laypage', 'layer'], function () {
                var form = layui.form(),
                        layer = layui.layer,
                        layedit = layui.layedit,
                        laydate = layui.laydate,
                        $ = layui.jquery,
                        element = layui.element(), //Tab的切换功能，切换事件监听等，需要依赖element模块
                        laypage = layui.laypage,
                        layer = parent.layer === undefined ? layui.layer : parent.layer;
                //创建一个编辑器
                var editIndex = layedit.build('LAY_demo_editor');
                //选项卡切换
                $('.site-demo-active').on('click', function () {
                    var type = $(this).data('type');
                    active[type] ? active[type].call(this) : '';
                });
                //分页加载数据
                $('input').iCheck({
                    checkboxClass: 'icheckbox_flat-green'
                });
                //获取数据
                for (var j = 1; j < 5; j++) {
                    ajaxFn(j, j);
                    //全选
                    $('#selected-all' + j).on('ifChanged', function (event) {
                        var $input = $('.site-table tbody tr td').find('input');
                        $input.iCheck(event.currentTarget.checked ? 'check' : 'uncheck');
                    });
                }
                //ajax请求
                function ajaxFn(typeid, num) {
                    $.ajax({
                        url: "http://221.10.2.222:5680/api/wx/News/ListByType/0/" + typeid + "/1",
                        type: "get",
                        dataType: "json",
                        success: function (data) {
                            itemsList(typeid, data);
                            laypage({
                                cont: 'page' + num,
                                pages: data.totalpages, //总页数                   
                                groups: 5, //连续显示分页数                    
                                skip: true,
                                jump: function (obj, first) {
                                    //得到了当前页，用于向服务端请求对应数据                                    
                                    if (!first) {
                                        $.ajax({
                                            url: "http://221.10.2.222:5680/api/wx/News/ListByType/0/" + typeid + "/" + obj.curr,
                                            type: "get",
                                            dataType: "json",
                                            async: false,
                                            success: function (data) {
                                                itemsList(typeid, data);                                                
                                            }
                                        });
                                    }
                                }
                            });                           
                        }
                    });
                }
                //表格样式   
                function itemsList(typeid, data) {
                    $('#items-list' + typeid).html("");
                    for (var i = 0; i < data.datalist.length; i++) {
                        $('#items-list' + typeid).prepend('<tr id="order' + i + '"><td><input type="checkbox" class="input-self" ></td><td>' + data.datalist[i].id + '</td><td>FN0180503</td><td>事项名称事项名称</td><td>' + data.datalist[i].origin + '</td><td class="title">' + data.datalist[i].title + '</td><td>已上线</td><td><a href="../serviceItems/detail.html?id=' + data.datalist[i].id + '" >详情 | </a><a href="../serviceItems/edit.html?id=' + data.datalist[i].id + '">编辑 | </a><a href="../serviceItems/downLine.html?id=' + data.datalist[i].id + '">编辑</a></td></tr>');             
                        var title = $("#order" + i).find(".title");                       
                        if (title.html().length > 8) {
                            title.attr("title", title.html());
                            title.html(title.html().substring(0, 8) + "...");
                        }
                    }
                }                                
                //监听提交                
                form.on('submit(sear)', function (data) {
                    layer.alert(JSON.stringify(data.field));
                    return false;
                }); 
                form.render();
            });            
        </script>
    </body>
</html>